{% extends '_partials/index.twig' %}

{% block head %}
    {{ parent() }}

    {{ css.inline('resources/css/guide.scss')|raw }}
    {{ css.inline('resources/css/hljs-github.scss')|raw }}
{% endblock %}

{% block content %}
    <div class="content__guide">
        <nav>
            {% for category, menuPages in menu %}
                <h2>
                    {{ category }}
                </h2>

                {% for menuPage in menuPages %}
                    <a href="/guide/{{ menuPage.id }}" {% if _page.isCurrent(menuPage.id) %}class="active"{% endif %}>
                        {{ menuPage.title }}
                    </a>
                {% endfor %}
            {% endfor %}
        </nav>

        <article id="read">
            <h1>{{ page.title }}</h1>

            {{ page.content|raw }}
        </article>
    </div>
{% endblock %}

{% block footer %}
    <footer>
        <div class="container">
            {% if _browse is defined %}
                <nav>
                    {% if _browse.next is defined %}
                        <a class="next cta cta--ghost" href="/guide/{{ _browse.next.id }}">
                            Continue reading:
                            {% if _browse.next.teaserTitle is defined %}
                                {{ _browse.next.teaserTitle }}
                            {% else %}
                                {{ _browse.next.title }}
                            {% endif %}
                        </a>
                    {% endif %}

                    {% if _browse.prev is defined %}
                        <a class="prev cta cta--ghost" href="/guide/{{ _browse.prev.id }}">
                            Previous post:
                            {% if _browse.prev.teaserTitle is defined %}
                                {{ _browse.prev.teaserTitle }}
                            {% else %}
                                {{ _browse.prev.title }}
                            {% endif %}
                        </a>
                    {% endif %}
                </nav>
            {% endif %}
        </div>
    </footer>
{% endblock %}

{% block scripts %}
    {{ parent() }}

    {{ js.inline('resources/js/codeClick.js')|raw }}
    {{ js.async.link('resources/js/hljs.min.js')|raw }}
{% endblock %}
